import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import { SafeAreaView } from 'react-navigation';

import BaseStyle from '../constants/Style';

import Marquee from '../components/marqueeLabel';

export default class MarqueeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.container}>
          <View style={styles.row}>
            <Text style={styles.icon}>&#xe618;</Text>
            <Marquee
              duration={8000}
              textStyle={{ fontSize: 20, color: 'red' }}
              text={
                '习近平祝贺纪念一带一路倡议在哈萨克斯坦提出5周年商务论坛开幕'
              }
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
    paddingLeft: 15,
  },
  row: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
  },
  icon: {
    fontFamily: 'iconfont',
    color: '#31bcfe',
    fontSize: 20,
  },
});
